<template>
  <div class="add_4">
    <Form ref="formValidate" :model="formValidate" :label-width="100">
      <Form-item label="物流方式">
        <Checkbox-group v-model="formValidate.modes">
          <Checkbox v-for="(item,index) in modeList" :key="index" :label="item.label" :disabled="item.disabled"></Checkbox>
        </Checkbox-group>
      </Form-item>
      <Form-item label="运费设置">
        <Radio-group v-model="freightType">
          <Radio v-for="item in freightList" :key="item.value" :label="item.label"></Radio>
        </Radio-group>
      </Form-item>
      <Form-item v-if="formValidate.freightValue===0">
        <Input-number v-model="formValidate.postage" :min="0" ></Input-number>
      </Form-item>
      <Form-item v-if="formValidate.freightValue===1">
        <Select v-model="formValidate.postageTemplate" placeholder="请选择运费模板">
          <Option v-for="item in postageTemplateList" :key="item.value" :value="item.value">{{item.label}}</Option>
        </Select>
      </Form-item>
    </Form>
  </div>
</template>

<script>
  export default {
    name: "add_4",
    data() {
      return {
        modeList: [
          { label: '快递', disabled: true },
          { label: '到店核销', disabled: false }
        ],
        freightType: '固定邮费',
        freightList: [
          { value: 0, label: '固定邮费' },
          { value: 1, label: '运费模板' },
        ],
        postageTemplateList: [
          { value: 0, label: '全国' },
          { value: 1, label: '北京包邮' },
          { value: 2, label: '山东包邮' },
          { value: 3, label: '广东指定包邮' },
          { value: 4, label: '上海不包邮' }
        ],
        formValidate: {
          modes: ['快递'],
          freightValue: 0,  // 运费类型
          postage: 0,  // 邮费
          postageTemplate: '',  // 邮费模板
        }
      }
    },
    watch: {
      freightType: {
        handler(newValue) {
          let value = this.freightList.filter(item => item.label===newValue)[0];
          this.formValidate.freightValue = value.value;
        },
        immediate: true
      }
    },
    created() {

    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  @import "../../../style/element.scss";
  .ivu-input-number,
  .ivu-select{
    width: 300px;
  }
</style>
